<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title> - 主页示例</title>
    <link rel="shortcut icon" href="assets/manager/favicon.ico"> 
    <link href="assets/manager/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="assets/manager/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="assets/manager/css/animate.css" rel="stylesheet">
    <link href="assets/manager/css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div><h2 class="crumbs">头像修改</h2></div>
        <div class="row">
            <div class="col-sm-10">
                <div class="ibox float-e-margins p10">
                    <div class="login_box" style="    overflow: hidden;">
                    <form>
                        <p style="width: 100%">
                            <img id="userPic" src="assets/manager/img/profile_big.jpg" style="max-width:50%;" alt="用户头像">
                        </p>
                        <div class="login_input">
                            <div style="width: 100%;height:180px;">
                                <div>
                                    <div class="">
                                        <div class="">
                                            <div class="file-box">
                                                <input type="file" name="file" class="file" id="file" size="28" />
                                            </div>
                                            <p id="progressBox"
                                                style="float:left;width: 100%; height: 18px; border: 1px solid #ccc;">
                                                <span id="progressBar"
                                                    style="display: inline-block; width: 0; height: 18px; background: blue;"></span>
                                            </p>
                                            <div style="float:left;width: 100%;">
                                                <h4 class="" id="myModalLabel" style="margin-top: 20px;">文件上传进度</h4>
                                            </div>
                                            <span id="percentage" style="color: blue;float:left;width: 100%;"></span> <br> <br>
                                            
                                            <p id="uploadRs" style="float:left;width: 100%;"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="login_btn col-xs-12">
                            <input id="savePic" type="button" value="修改" onclick="UploadFile()"> 
                        </div>
                    </form>
                </div>    
                </div>
            </div>
        </div>
    </div>
    <!-- 全局js -->
    <script src="assets/manager/js/jquery.min.js?v=2.1.4"></script>
    <script src="assets/manager/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="assets/manager/js/plugins/layer/layer.min.js"></script>
    <!-- Flot -->
    <script src="assets/manager/js/plugins/flot/jquery.flot.js"></script>
    <script src="assets/manager/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="assets/manager/js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="assets/manager/js/plugins/flot/jquery.flot.pie.js"></script>
    <!-- 自定义js -->
    <script src="assets/manager/js/content.js"></script>
    <!--flotdemo-->
    <script type="text/javascript">
    function UploadFile() {
		var pathUrl = "";
		$('#uploadRs').html('上传中。。。'); 
		var fileObj = document.getElementById("file").files[0]; // js 获取文件对象 
		var FileController = "editPic"; // 接收上传文件的后台地址  
		var fileSize = fileObj.size;
		var maxSize = 2097152;
		if(fileSize > maxSize){
			alert("不可以超过2M。");
			$("#uploadRs").html("");
		}else{
			// FormData 对象---进行无刷新上传 
			var form = new FormData();
			form.append("type", "coverPic"); // 可以增加表单数据 
			form.append("file", fileObj); // 文件对象 
			// XMLHttpRequest 对象 
			var xhr = new XMLHttpRequest();
			xhr.open("post", FileController, true);
			xhr.onload = function() {
				setTimeout(function(){
					$('#uploadRs').html('修改完成！'); 
					alert("上传完成!");
					$("#userPic").attr("src",pathUrl);
					$("#file").val("");
					$("#progressBar").width(0).css("transition","inherit");
					$("#percentage").html("");
					$("#uploadRs").html("");
				},1000);
			};
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4 && xhr.status == 200){    
					var reObject = JSON.parse(xhr.responseText);
					if(reObject.res == "1"){
						pathUrl = reObject.picPath;
					}else{
						alert(reObject.msg);
					}
			    }   
			};
			//监听progress事件 
			xhr.upload.addEventListener("progress", progressFunction, false);
			xhr.send(form);
		}
	}
	function progressFunction(evt) {
		var progressBar = document.getElementById("progressBar");
		var percentageDiv = document.getElementById("percentage");
		if (evt.lengthComputable) {
			$("#progressBar").width(0).css("transition","width .8s linear");
			$("#progressBar").width(Math.round(evt.loaded / evt.total * 100) + "%");
			$("#percentage").html(Math.round(evt.loaded / evt.total * 100) + "%");
		}
	}
	$(document).ready(function(){
		$.get("mgindexgetuser",function(data){
			$("#userPic").attr("src",data.coverPic); 
		});

		
		$("#file").change(function(){
			$("#progressBar").css("transition","inherit");
			$("#progressBar").width(0);
			$("#percentage").html("");
		}); 
	})
    </script>
</body>
</html>